<template>
    <div class="dashboard">
        <div class="index_left">
        </div>
        <div class="index_right">
            

            <!-- 材料查看 轮播标题 -->
            <div class="index_lunbo_title" v-if="flagswitch">
                
                
                <img class="title_rectangular" :class="[curMode == 1 ? 'curimgbor' : '']" @click="setMode('RECT')"
                    src="@/assets/images/ai_rectangular.png" alt="">
                <img class="title_polygon" :class="[curMode == 2 ? 'curimgbor' : '']" @click="setMode('POLYGON')"
                    src="@/assets/images/ai_polygon.png" alt="">
                <el-select class="input_select" size="mini" v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <!-- 轮播 标签-->
            <div class="content_swiper" v-if="flagswitch">
                <div class="big_img">
                    <!-- 容器层 -->
                    <div id="map"></div>
                    <!-- <img :src="curimg" alt=""> -->
                    <div class="big_bottom_btn">
                        <div class="btn_msg">
                            样本信息：<span>img_2389.png</span>
                        </div>
                        <div class="img_size">
                            <span>Width：1200px</span>
                            <span>Height：678px</span>
                        </div>
                        <div class="btn_label">
                            标签：<span>1</span>
                        </div>
                        <div class="btn_red" @click="clearbtn('flag')">
                            清除标注
                        </div>
                        <div class="btn_green" @click="savebtn">
                            完成
                        </div>
                    </div>
                    <button @click="zoomIn();">+放大</button>
                    <button @click="zoomOut();">-缩小</button>
                    <button @click="setMode('DRAWMASK');">涂抹</button>
                    <button @click="setMode('CLEARMASK');">擦除</button>
                    <button @click="setMode('MARKER');">注记</button>
                    <button @click="setMode('LINE');">画线</button>
                    <button @click="btnclearimg">清除图层</button>
                    <button @click="btnadd">添加图层</button>
                    <button @click="refresh">刷新图层</button>
                    <button @click="addmoredata">添加图形</button>
                    <div>
                        {{ curtext }}
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>


import { debounce } from "@/utils/debounce.js"; // 引入防抖函数
import Breadcrumb from '@/components/Breadcrumb'; //路由导航 

import AILabel from 'ailabel';


let that;
let drawingStyle; // 绘制样式
let gMap; // 标注容器           
let Mode = ''; // 默认绘制类型
let gImageLayer; // 图片绘制
let gFirstFeatureLayer; // 实例化
let gFirstFeatureLayer2;
let gFirstMaskLayer; // 涂抹层
let gFirstTextLayer; // 文本层
let targetMarker; // 更新视图
let targetText; // 更新标签
let gFirstMarker; // 标注

export default {
    name: "Dashboard",

    data() {
        return {
            searchval: "", // 搜索输入值
            currindex: 0, // 默认选中项
            list: [{
                title: '样本集1',
                percentage: '80%',
                number: 1518,
                color: 1,
            }, {
                title: '样本集2',
                percentage: '80%',
                number: 1517,
                color: 2,
            }, {
                title: '样本集3',
                percentage: '80%',
                number: 1516,
                color: 3,
            }, {
                title: '样本集4',
                percentage: '80%',
                number: 1515,
                color: 3,
            }, {
                title: '样本集5',
                percentage: '60%',
                number: 1514,
                color: 3,
            }, {
                title: '样本集6',
                percentage: '60%',
                number: 1514,
                color: 3,
            }, {
                title: '样本集7',
                percentage: '60%',
                number: 1513,
                color: 3,
            }, {
                title: '样本集8',
                percentage: '60%',
                number: 1519,
                color: 3,
            }, {
                title: '样本集9',
                percentage: '60%',
                number: 1514,
                color: 3,
            }, {
                title: '样本集10',
                percentage: '60%',
                number: 1519,
                color: 3,
            }, {
                title: '样本集11',
                percentage: '60%',
                number: 1519,
                color: 3,
            }, {
                title: '样本集12',
                percentage: '60%',
                number: 1519,
                color: 3,
            }, {
                title: '样本集13',
                percentage: '60%',
                number: 1514,
                color: 3,
            }, {
                title: '样本集14',
                percentage: '60%',
                number: 1519,
                color: 3,
            }, {
                title: '样本集15',
                percentage: '60%',
                number: 1515,
                color: 3,
            }], // 数据列表
            options: [{
                value: '测速区',
                label: '测速区',
                color: 'red'
            }, {
                value: '距离参考线',
                label: '距离参考线',
                color: 'white'
            }, {
                value: '距离检测线',
                label: '距离检测线',
                color: 'green'
            }],
            value: '测速区', // 当前选择框值
            imglist: [
                {
                    url: require('../../assets/images/ai_bj1.png'), name: "ai_bj1"
                },
                {
                    url: require('../../assets/images/ai_bj2.png'), name: "ai_bj2"
                },
                {
                    url: require('../../assets/images/ai_bj3.png'), name: "ai_bj3"
                },
                {
                    url: require('../../assets/images/ai_img1.png'), name: "ai_bj3"
                },
                {
                    url: require('../../assets/images/ai_bj1.png'), name: "ai_bj1"
                },
                {
                    url: require('../../assets/images/ai_bj2.png'), name: "ai_bj2"
                },
                {
                    url: require('../../assets/images/ai_bj3.png'), name: "ai_bj3"
                },
            ], // 素材列表
            curimg: '', // 当前大图 url或base64
            timer: null, // 延时定时器
            animate: false, // 轮播是否开启动画
            duration: 1000, // 轮播动画延时
            type: 1, // 轮播方向
            centerindex: 2, // 轮播中间值
            flagswitch: true, // 标注开关
            rleData: [], // 最终图像标记
            curMode: 1, // 当前图形类型
            curtext: '',
        };
    },
    created() {
        //  this.timer = setInterval(this.scroll, this.duration);
        this.curimg = this.imglist[this.centerindex].url;
        that = this;
        console.log(this.imglist.length);
        console.log(this.rleData.length);
        this.rleData.length = this.imglist.length;
        console.log(this.rleData.length);
        console.log(this.rleData);

        this.rleData = this.addmoredatax;
        console.log(this.addmoredatax);
        console.log(this.name);
    },
    methods: {
        setMode(mode) {
            // console.log(mode);
            gMap.setMode(mode);
            // 后续对应模式处理
            switch (gMap.mode) {
                case 'PAN': {
                    break;
                }
                case 'MARKER': {
                    // 忽略
                    break;
                }
                case 'POINT': {
                    drawingStyle = { fillStyle: '#9370DB' };
                    gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                case 'CIRCLE': {
                    drawingStyle = { fillStyle: '#9370DB', strokeStyle: '#0000FF', lineWidth: 2 };
                    gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                case 'LINE': {
                    drawingStyle = { strokeStyle: '#FF00FF', lineJoin: 'round', lineCap: 'round', lineWidth: 1 };
                    gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                case 'POLYLINE': {
                    drawingStyle = { strokeStyle: '#FF1493', lineJoin: 'round', lineCap: 'round', lineWidth: 10 }
                    gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                case 'RECT': {
                    drawingStyle = { strokeStyle: 'red', lineWidth: 1, zIndex: 20 }
                    gMap.setDrawingStyle(drawingStyle);
                    this.curMode = 1;
                    break;
                }
                case 'POLYGON': {
                    drawingStyle = { strokeStyle: '#00f', fillStyle: '#0f0', globalAlpha: .3, lineWidth: 1, fill: true, stroke: true, zIndex: 15 }
                    gMap.setDrawingStyle(drawingStyle);
                    this.curMode = 2;
                    break;
                }
                case 'DRAWMASK': {
                    drawingStyle = { strokeStyle: 'rgba(255, 0, 0, .5)', fillStyle: '#00f', lineWidth: 20 }
                    gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                case 'CLEARMASK': {
                    drawingStyle = { fillStyle: '#00f', lineWidth: 20 }
                    gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                default:
                    break;
            }
        },
        // 去标注
        gomark(item) {
            this.flagswitch = true;
        },
        // 监听输入框搜索
        changeinput() {
            if (!this.searchval) {
                this.$nextTick(() => {
                    this.list = [{
                        title: '样本集1',
                        percentage: '80%',
                        number: 1518,
                        color: 1,
                    }, {
                        title: '样本集2',
                        percentage: '80%',
                        number: 1517,
                        color: 2,
                    }, {
                        title: '样本集3',
                        percentage: '80%',
                        number: 1516,
                        color: 3,
                    }, {
                        title: '样本集4',
                        percentage: '80%',
                        number: 1515,
                        color: 3,
                    }, {
                        title: '样本集5',
                        percentage: '60%',
                        number: 1514,
                        color: 3,
                    }, {
                        title: '样本集6',
                        percentage: '60%',
                        number: 1514,
                        color: 3,
                    }, {
                        title: '样本集7',
                        percentage: '60%',
                        number: 1513,
                        color: 3,
                    }, {
                        title: '样本集8',
                        percentage: '60%',
                        number: 1519,
                        color: 3,
                    }, {
                        title: '样本集9',
                        percentage: '60%',
                        number: 1514,
                        color: 3,
                    }, {
                        title: '样本集10',
                        percentage: '60%',
                        number: 1519,
                        color: 3,
                    }, {
                        title: '样本集11',
                        percentage: '60%',
                        number: 1519,
                        color: 3,
                    }, {
                        title: '样本集12',
                        percentage: '60%',
                        number: 1519,
                        color: 3,
                    }, {
                        title: '样本集13',
                        percentage: '60%',
                        number: 1514,
                        color: 3,
                    }, {
                        title: '样本集14',
                        percentage: '60%',
                        number: 1519,
                        color: 3,
                    }, {
                        title: '样本集15',
                        percentage: '60%',
                        number: 1515,
                        color: 3,
                    }, {
                        title: '样本集16',
                        percentage: '90%',
                        number: 1519,
                        color: 3,
                    }, {
                        title: '样本集17',
                        percentage: '90%',
                        number: 1515,
                        color: 3,
                    }, {
                        title: '样本集18',
                        percentage: '90%',
                        number: 1519,
                        color: 3,
                    }, {
                        title: '样本集19',
                        percentage: '90%',
                        number: 1515,
                        color: 3,
                    }, {
                        title: '样本集20',
                        percentage: '90%',
                        number: 1519,
                        color: 3,
                    }] // 数据列表
                })
            }
            let arr = this.list.filter((item, index) => {
                return item.percentage == this.searchval;
            });
            if (arr.length > 0) {
                this.list = arr;
            }
        },
        // 手动触发轮播
        handchange: debounce((item, index) => {
            // that.curimg = item.url;
            // 大于2 和小于2的 方向处理
            if (index > that.centerindex) {
                that.clickscroll(2);
            } else if (index < that.centerindex) {
                that.clickscroll(1);
            }
        }, 300, false),
        // 轮播滚动
        clickscroll: debounce(type => {
            // 方向赋值
            that.type = type;
            // type 1 向上  2 向下
            that.animate = true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
            // 清除标记
            that.clearbtn();
            that.timer = setTimeout(() => {
                if (type == 2) {
                    that.imglist.push(that.imglist.shift());  //删除数组的第一个元素并添加到数组的最后一项
                    that.rleData.push(that.rleData.shift());  //删除数组的第一个元素并添加到数组的最后一项
                } else {
                    that.imglist.unshift(that.imglist.pop());  //删除数组的第一个元素并添加到数组的最后一项
                    that.rleData.unshift(that.rleData.pop());  //删除数组的第一个元素并添加到数组的最后一项
                }
                that.curimg = that.imglist[that.centerindex].url;
                that.animate = false;  //滑动完成后取消过渡动画，实现无缝滚动

                // 重新渲染标记
                that.clearbtn(); // 清除标记
                that.btnclearimg(); // 清除图层
                that.btnadd(); // 添加新图层
                that.addmoredata(); // 添加图形
            }, that.duration / 2);//滑动item项必须要在每次轮播开始前,所以时间必须比duration短
        }, 300, false),
        // 搜索列表点击事件
        handClick(item, idx) {
            // 赋值当前项
            this.currindex = idx;
            // 展示样本集
            this.flagswitch = false;
        },

        // 初始化画布 获取基本属性
        onImageLoad(e) {
            console.log(e);
        },
        // 画完标记触发
        onAnnoAdded(item) {

        },
        // 清除标记
        clearbtn(flag) {
            // 删除全部marker
            gMap.markerLayer.removeAllMarkers();
            // 删除全部text
            gFirstTextLayer.removeAllTexts();
            // 删除全部feature
            gFirstFeatureLayer.removeAllFeatures();
            // 删除全部涂抹
            gFirstMaskLayer.removeAllActions();
        },
        // 刷新图层
        refresh() {
            gMap.refresh();
        },
        // 保存标记位置
        savebtn() {
            const rleData = gFirstFeatureLayer.getAllFeatures();
            console.log('--rleData--', rleData);
            this.rleData[this.currindex] = rleData;
            this.$message({
                message: '保存成功',
                type: 'success'
            })
        },

        // 标记组件初始化完成
        onReady() {

        },
        // 读取默认数据
        readydata() {

        },
        // 删除图层
        btnclearimg() {
            // gMap.removeAllLayers();
            gMap.removeLayerById('first-layer-image');
        },
        // 添加图层
        btnadd() {
            gImageLayer = new AILabel.Layer.Image('first-layer-image', // id
                {
                    src: this.curimg,
                    width: 790,
                    height: 520,
                    position: { // 图片左上角坐标
                        x: 0,
                        y: 0
                    }
                }, // imageInfo
                { name: '第一个图片图层' }, // props
                { zIndex: 5 } // style
            )
            gMap.addLayer(gImageLayer);
        },
        // 缩小
        zoomIn() {
            gMap.zoomIn();
        },
        // 放大
        zoomOut() {
            gMap.zoomOut();
        },
        // 初始化容器
        showmarkimg() {
            // 创建容器
            gMap = new AILabel.Map('map', {
                center: { x: 395, y: 260 },
                zoom: 800,
                mode: 'RECT', // 绘制线段
                refreshDelayWhenZooming: false, // 缩放时是否允许刷新延时，性能更优
                zoomWhenDrawing: false,
                panWhenDrawing: false
            })
            

            // 添加图片层
            gImageLayer = new AILabel.Layer.Image('first-layer-image', // id
                {
                    src: this.curimg,
                    width: 790,
                    height: 520,
                    position: { // 图片左上角坐标
                        x: 0,
                        y: 0
                    }
                }, // imageInfo
                { name: '第一个图片图层' }, // props
                { zIndex: 5 } // style
            )
            gMap.addLayer(gImageLayer);

            // 实例化
            gFirstFeatureLayer = new AILabel.Layer.Feature(
                'first-layer-feature', // id
                { name: '第一个矢量图层' }, // props
                { zIndex: 10 } // style
            );
            gMap.addLayer(gFirstFeatureLayer);
            gFirstFeatureLayer2 = new AILabel.Layer.Feature(
                'second-layer-feature', // id
                { name: '第二个矢量图层' }, // props
                { zIndex: 30 } // style
            );
            gMap.addLayer(gFirstFeatureLayer2);
            // 涂抹层
            gFirstMaskLayer = new AILabel.Layer.Mask(
                'first-layer-mask', // id
                { name: '第一个涂抹图层' }, // props
                { zIndex: 12, opacity: .5 } // style
            );
            gMap.addLayer(gFirstMaskLayer);

            // 添加文本层
            gFirstTextLayer = new AILabel.Layer.Text(
                'first-layer-text', // id
                { name: '第一个文本图层' }, // props
                { zIndex: 13, opacity: 1 } // style
            );
            gMap.addLayer(gFirstTextLayer);

            // 添加图形
            this.addmoredata();

        },
        // 添加图形
        addmoredata() {
            console.log(this.rleData);
            let rectFeature; // 添加矩形
            let gFirstFeaturePolygon; // 添加多边形
            let gFirstText; // 添加文字
            this.rleData && this.rleData[this.currindex] && this.rleData[this.currindex].forEach(ele => {
                console.log(ele);
                if (ele.type == "RECT") {
                    rectFeature = new AILabel.Feature.Rect(
                        ele.id, // id
                        ele.shape, // shape
                        ele.props, // props
                        ele.style // style
                    );
                    gFirstFeatureLayer.addFeature(rectFeature);
                    // 判断是否有 text
                    if (ele.props && ele.props.text) {
                        gFirstText = new AILabel.Text(
                            ele.props.textId, // id
                            { text: ele.props.text, position: { x: ele.shape.x, y: ele.shape.y }, offset: { x: 0, y: 0 } }, // shape, 左上角
                            { name: '第一个文本对象', textId: ele.props.textId, deleteMarkerId: ele.props.deleteMarkerId }, // props
                            { fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: '#0f0' } // style
                        );
                        gFirstTextLayer.addText(gFirstText);
                    }

                } else if (ele.type == 'POLYGON') {
                    gFirstFeaturePolygon = new AILabel.Feature.Polygon(
                        ele.id, // id
                        ele.shape, // shape
                        ele.props, // props
                        ele.style // style
                    );
                    gFirstFeatureLayer.addFeature(gFirstFeaturePolygon);
                    if (ele.props && ele.props.text) {
                        gFirstText = new AILabel.Text(
                            ele.props.textId, // id, // id
                            { text: ele.props.text, position: ele.shape.points[0], offset: { x: 0, y: 0 } }, // shape, 左上角
                            { name: '第一个文本对象', textId: ele.props.textId, deleteMarkerId: ele.props.deleteMarkerId }, // props
                            { fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: '#0f0' } // style
                        );
                        gFirstTextLayer.addText(gFirstText);

                    }
                }
            });
        }
    },
    components: {
        Breadcrumb,
    },
    // computed: {
    //     ...mapGetters(["name","addmoredatax"]),
    // },
    mounted() {
        this.showmarkimg();
        // 绘制结束
        gMap.events.on('drawDone', (type, data, data1) => {
            // console.log('type, data', type, data);
            // 唯一ID
            const relatedTextId = `label-text-id-${+new Date()}`;
            const relatedDeleteMarkerId = `label-marker-id-${+new Date()}`;
            console.log(type);
            // 添加标注
            if (type === 'MARKER') {
                console.log("sssssss");
                const marker = new AILabel.Marker(
                    relatedDeleteMarkerId, // id
                    {
                        src: require('../../assets/images/marker.png'),
                        position: data,
                        offset: {
                            x: -16,
                            y: 32
                        }
                    }, // markerInfo
                    { name: '第一个marker注记' } // props
                );
                marker.events.on('click', marker => {
                    console.log('marker click');
                    gMap.markerLayer.removeMarkerById(marker.id);
                });
                gMap.markerLayer.addMarker(marker);
            }
            // 添加点
            else if (type === 'POINT') {
                const pointFeature = new AILabel.Feature.Point(
                    relatedDeleteMarkerId, // id
                    { ...data, sr: 3 }, // shape
                    { name: '第一个矢量图层', textId: relatedTextId, deleteMarkerId: relatedDeleteMarkerId }, // props
                    drawingStyle // style
                );
                gFirstFeatureLayer.addFeature(pointFeature);
            }
            // 添加圆
            else if (type === 'CIRCLE') {
                // data 代表r半径shape；data1代表sr半径shape
                const circleFeature = new AILabel.Feature.Circle(
                    relatedDeleteMarkerId, // id
                    data, // data1代表屏幕坐标 shape
                    { name: '第一个矢量图层', textId: relatedTextId, deleteMarkerId: relatedDeleteMarkerId }, // props
                    { fillStyle: '#F4A460', strokeStyle: '#D2691E', lineWidth: 2 } // style
                );
                gFirstFeatureLayer.addFeature(circleFeature);
            }
            // 添加线段
            else if (type === 'LINE') {
                const scale = gMap.getScale();
                const width = drawingStyle.lineWidth / scale;
                const lineFeature = new AILabel.Feature.Line(
                    relatedDeleteMarkerId, // id
                    { ...data, width }, // shape
                    { name: '第一个矢量图层', textId: relatedTextId, deleteMarkerId: relatedDeleteMarkerId }, // props
                    drawingStyle // style
                );
                gFirstFeatureLayer.addFeature(lineFeature);
            }
            // 添加多线段
            else if (type === 'POLYLINE') {
                const scale = gMap.getScale();
                const width = drawingStyle.lineWidth / scale;
                const polylineFeature = new AILabel.Feature.Polyline(
                    relatedDeleteMarkerId, // id
                    { points: data, width }, // shape
                    { name: '第一个矢量图层', textId: relatedTextId, deleteMarkerId: relatedDeleteMarkerId }, // props
                    drawingStyle // style
                );
                gFirstFeatureLayer.addFeature(polylineFeature);
            }
            // 添加矩形
            else if (type === 'RECT') {
                const rectFeature = new AILabel.Feature.Rect(
                    relatedDeleteMarkerId, // id
                    data, // shape
                    { name: '矢量图形', textId: relatedTextId, deleteMarkerId: relatedDeleteMarkerId, text: this.value }, // props
                    drawingStyle // style
                );


                console.log(rectFeature);
                console.log(gMap);
                
                // rectFeature.setOptions({
                //     editable: true,
                //     zIndex: 100
                // })
                // rectFeature.events.on('dblclick', (e) => {
                //     e.stopPropagation();
                //     rectFeature.startEdit();
                // });
                gFirstFeatureLayer.addFeature(rectFeature);

                // 添加feature标签名
                const { x: ltx, y: lty } = data;
                const gFirstText = new AILabel.Text(
                    relatedTextId, // id
                    { text: this.value, position: { x: ltx, y: lty }, offset: { x: 0, y: 0 } }, // shape, 左上角
                    { name: '第一个文本对象', textId: relatedTextId, deleteMarkerId: relatedDeleteMarkerId }, // props
                    { fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: '#0f0' } // style
                );
                gFirstTextLayer.addText(gFirstText);

            }
            // 添加多边形
            else if (type === 'POLYGON') {
                const polygonFeature = new AILabel.Feature.Polygon(
                    relatedDeleteMarkerId, // id
                    { points: data }, // shape
                    { name: '矢量图形2', textId: relatedTextId, deleteMarkerId: relatedDeleteMarkerId, text: this.value }, // props
                    drawingStyle // style
                );
                console.log(polygonFeature);
                console.log(AILabel);
                
                console.log(gMap);
                
                gFirstFeatureLayer2.addFeature(polygonFeature);

                // 添加feature标签名
                const { x: ltx, y: lty } = data[0];
                const gFirstText = new AILabel.Text(
                    relatedTextId, // id
                    { text: this.value, position: { x: ltx, y: lty }, offset: { x: 0, y: 0 } }, // shape, 左上角
                    { name: '第一个文本对象', textId: relatedTextId, deleteMarkerId: relatedDeleteMarkerId }, // props
                    { fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: '#0f0' } // style
                );
                gFirstTextLayer.addText(gFirstText);
            }
            // 添加涂抹
            else if (type === 'DRAWMASK') {
                const scale = gMap.getScale();
                const width = drawingStyle.lineWidth / scale;
                const drawMaskAction = new AILabel.Mask.Draw(
                    relatedDeleteMarkerId, // id
                    '铅笔',
                    { points: data, width }, // shape
                    { name: '港币', price: '1元', textId: relatedTextId, deleteMarkerId: relatedDeleteMarkerId }, // props
                    drawingStyle // style
                );
                gFirstMaskLayer.addAction(drawMaskAction);
            }
            // 添加擦除
            else if (type === 'CLEARMASK') {
                const scale = gMap.getScale();
                const width = drawingStyle.lineWidth / scale;
                const clearMaskAction = new AILabel.Mask.Clear(
                    relatedDeleteMarkerId, // id
                    { points: data, width } // shape
                );
                gFirstMaskLayer.addAction(clearMaskAction);
            }
        });
        // click单击事件
        gMap.events.on('click', point => {
            // console.log('--click--', point);
        });
        gMap.events.on('boundsChanged', data => {
            console.log('--map boundsChanged--', data);
        });
        gMap.events.on('featureSelected', feature => {
            // 高亮选中feature
            gMap.setActiveFeature(feature);
            // console.log(feature);
            // feature.style.opacity = 0.2
            // feature.refresh()
            // gMap.refresh()
            const markerId = feature.props.deleteMarkerId;
            const textId = feature.props.textId;
            // 禁止重复编辑
            const mappedMarker = gMap.markerLayer.getMarkerById(markerId);
            if (mappedMarker) {
                return;
            }
            console.log(feature, 'feature');
            let features;
            if (feature.type == "POLYGON") {
                // console.log(feature.shape.points);
                features = feature.shape.points[1];
            } else if (feature.type == "RECT") {
                
                features = feature.getPoints()[1];
                console.log(feature, 12);
                
            } else if (feature.type == 'LINE') {
                console.log("line");
                features = feature.shape.end;
            }
            console.log(features, 1212);
            
            // 添加delete-icon
            gFirstMarker = new AILabel.Marker(
                markerId, // id
                {
                    src: require('../../assets/images/delete.png'),
                    position: features, // 矩形右上角
                    offset: {
                        x: -20,
                        y: -4
                    }
                }, // markerInfo
                { name: '第一个marker注记' } // props
            );
            gFirstMarker.events.on('click', marker => {
                console.log(marker);
                // 首先删除当前marker
                gMap.markerLayer.removeMarkerById(marker.id);
                // 删除对应text
                gFirstTextLayer.removeTextById(textId);
                // 删除对应feature
                gFirstFeatureLayer.removeFeatureById(feature.id);
                gFirstFeatureLayer2.removeFeatureById(feature.id);
            });

            gMap.markerLayer.addMarker(gFirstMarker);
        });
        gMap.events.on('featureUnselected', feature => {
            console.log('取消featureSelected');
            gMap.setActiveFeature(null);
            gMap.markerLayer.removeMarkerById(feature.props.deleteMarkerId);
        });
        gMap.events.on('dblclick', (e) => {
            console.log(e, 1);

            // const pixel = map.getPixelFromCoordinate(e.coordinate);
            // const features = map.getFeaturesAtPixel(pixel);
        });
        gMap.events.on('featureUpdated', (feature, shape) => {
            console.log("移动更新");
            console.log("featureUpdated", feature, shape);
            feature.updateShape(shape);
            // 更新标记
            // 更新text位置
            // 唯一ID
            const markerId = feature.props.deleteMarkerId;
            const textId = feature.props.textId;
            console.log(markerId, textId);
            // 更新marker位置
            targetMarker = gMap.markerLayer.getMarkerById(markerId);
            // console.log(targetMarker);
            targetMarker.updatePosition(feature.type == "POLYGON" ? feature.shape.points[1] : feature.getPoints()[1]);
            // 更新text位置
            targetText = gFirstTextLayer.getTextById(textId);
            console.log('--targetText--', targetText);
            targetText.updatePosition(feature.type == "POLYGON" ? feature.shape.points[0] : feature.getPoints()[0]);
        });
        gMap.events.on('featureDeleted', ({ id: featureId }) => {
            gFirstFeatureLayer.removeFeatureById(featureId);
        });
    },
};
</script>

<style lang="scss">
@import "../../style/variables.scss";

.dashboard {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;

    .index_left {
        width: 320px;
        min-height: calc(100vh - 72px);
        background-color: #FFFFFF;
        border-right: 2px solid #ffffff;
        // float: left;
        display: flex;
        flex-direction: column;
        align-items: center;

        .index_div {
            border-bottom: 2px solid #ffffff;
            padding: 9px 0;
            width: 100%;

            .layer22 {
                height: 36px;
                border-radius: 18px;
                padding: 10px 0;
                background-color: rgba(0, 150, 136, 1);
                width: 280px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto;

                .info6 {
                    width: 55px;
                    display: block;
                    overflow-wrap: break-word;
                    color: rgba(252, 252, 252, 1);
                    font-size: 11px;
                    white-space: nowrap;
                    text-align: center;
                }
            }
        }

        .inputval {
            padding: 0 5px;

            i {
                font-size: 18px;
            }
        }

        .index_list {
            width: 100%;
            // height: 560px;
            // overflow: scroll;

            .index_title {
                font-size: 13px;
                color: black;
                width: 100%;
                height: 42px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border-bottom: 2px solid #ffffff;

                &>div {
                    width: 100px;
                    margin-left: 30px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }

                i {
                    display: block;
                    width: 21px;
                    height: 18px;
                    background: #D7D7D7;
                    border-radius: 3px;
                    line-height: 18px;
                    text-align: center;
                    font-size: 9px;
                    color: #FFFFFF;
                    transform: scale(.9);
                    margin-left: 6px;
                }
            }

            .index_item {
                font-size: 12px;
                color: black;
                width: 100%;
                height: 42px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                cursor: pointer;
                border-bottom: 2px solid #ffffff;

                &>div {
                    width: 100px;
                    margin-left: 30px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }

                i {
                    display: block;
                    width: 16px;
                    height: 16px;
                    background: #da5f5f;
                    border-radius: 50%;
                    margin-right: 10px;
                }
            }

            // 当前选中项
            .currcolor {
                color: #009688;
            }
        }
    }

    .index_right {
        width: 100%;
        min-height: calc(100vh - 72px);
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffffff;

        .right_top_title {
            width: 900px;
            // width: 100%;
            height: 56px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            color: black;
            background-color: #ffffff;
            border-bottom: 2px solid #ffffff;
        }

        .index_detail {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;

            .item_detail {
                width: 275px;
                height: 557px;
                margin: 0 10px;
                background: #ffffff;
                box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
                border-radius: 5px;

                .detail_p1 {
                    margin-top: 30px;
                    font-size: 11px;
                    color: black;
                    text-align: center;
                }

                .detail_p2 {
                    margin-top: 15px;
                    font-size: 11px;
                    color: black;
                    text-align: center;
                }

                .detail_p3 {
                    margin-top: 15px;
                    font-size: 28px;
                    color: black;
                    font-weight: 600;
                    text-align: center;

                    span {
                        color: black;
                        font-size: 9px;
                    }
                }

                .detail_line {
                    display: block;
                    width: 90%;
                    padding: 0 5%;
                    height: 2px;
                    background: #ffffff;
                    margin: 0 auto;
                    margin-top: 30px;
                }

                .item_detail_list {
                    width: 92%;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    margin: 0 auto;
                    margin-top: 30px;
                    border-radius: 24px;
                    border: 2px solid #D7D7D7;
                    padding: 2px;

                    .item_detail_item {
                        width: 59px;
                        height: 39px;
                        margin: 1px 0 0 2px;
                        box-sizing: border-box;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .item_detail_item:nth-child(4) img {
                        border-top-right-radius: 24px;
                    }

                    .item_detail_item:nth-child(13) img {
                        border-bottom-left-radius: 24px;
                    }

                    .item_detail_item:first-child img {
                        border-top-left-radius: 24px;
                    }

                    .item_detail_item:last-child img {
                        border-bottom-right-radius: 24px;
                    }

                }

                .detail_complete {
                    width: 240px;
                    height: 44px;
                    font-size: 9px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: black;
                    line-height: 44px;
                    text-align: center;
                    margin: 0 auto;
                    margin-top: 20px;
                }

                .detail_percentage {
                    display: block;
                    width: 100%;
                    height: 44px;
                    font-size: 21px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: black;
                    text-align: center;
                    line-height: 44px;
                }

                .detail_btn {
                    width: 110px;
                    height: 28px;
                    background: #009688;
                    border-radius: 20px;
                    border: 2px solid #D7D7D7;
                    margin: 0 auto;
                    font-size: 13px;
                    color: #FCFCFC;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 12px;
                    cursor: pointer;
                }
            }
        }

        // 底部btn
        .detail_bottom_btn {
            width: 100%;
            max-width: 855px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 50px;

            div {
                font-size: 13px;
                color: #FCFCFC;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                height: 36px;
                background: #ffffff;
                border-radius: 20px;
                border: 2px solid #D7D7D7;
                padding: 0 28px;
                margin-left: 18px;
            }

            .btn3 {
                background-color: #F74236;
            }
        }

        // 材料轮播标题
        .index_lunbo_title {
            width: 845px;
            height: 72px;
            background: #ffffff;
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;

            .title_first {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-left: 20px;

                .title_top {
                    font-size: 11px;
                    color: black;
                }

                .title_btm {
                    font-size: 9px;
                    color: red;
                    margin-top: 10px;
                    min-width: 110px;
                    text-align: center;

                    .breadcrumb-container {
                        font-size: 9px;
                        line-height: 0;

                        span {
                            color: red !important;
                        }
                    }
                }

            }

            .title_line {
                width: 3px;
                height: 32px;
                background: #ffffff;
                margin: 0 25px;
            }

            .title_pro {
                width: 144px;
                // height: 44px;
                font-size: 11px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #666666;
                line-height: 16px;
            }

            .title_img {
                width: 144px;
                font-size: 11px;

                .active_img {
                    color: red;
                }
            }

            .title_rectangular {
                width: 32px;
                height: 32px;
                cursor: pointer;
            }

            .title_polygon {
                width: 30px;
                height: 34px;
                margin-left: 25px;
                margin-right: 26px;
                cursor: pointer;
            }

            .curimgbor {
                background-color: #f0f0f0;
            }
        }

        // 轮播
        .content_swiper {
            display: flex;
            justify-content: flex-start;
            width: 845px;
            height: 436px;
            margin-top: 29px;

            .big_img {
                width: 656px;
                height: 436px;

                #map {
                    width: 656px;
                    height: 436px;
                    border: 1px solid red;
                    position: relative;
                    cursor: pointer;
                }

                .ai-observer {
                    width: 650px !important;
                    height: 430px !important;
                    border: 1px solid #009688; // 轮播大图边框
                    background-color: #FFFFFF;

                    .vmr-g-image {
                        width: 650px !important;
                        height: 430px !important;
                    }
                }

                // img{
                //     display: block;
                //     width: 99% !important;
                //     height: 97.5% !important;
                //     top: 0;
                //     left: 0;
                //     right: 0;
                //     bottom: 0;
                //     margin: auto;
                // }

                .big_bottom_btn {
                    margin-top: 10px;
                    width: 656px;
                    padding: 0 20px;
                    height: 72px;
                    background: #FFFFFF;
                    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
                    border-radius: 5px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .btn_msg {
                        display: block;
                        height: 16px;
                        font-size: 11px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #666666;

                        span {
                            color: red;
                        }
                    }

                    .img_size {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        flex-direction: column;

                        span {
                            font-size: 11px;
                            color: black;
                            font-weight: 600;
                            margin: 3px 0;
                            margin-left: 50px;
                        }
                    }

                    .btn_label {
                        height: 16px;
                        font-size: 11px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: black;
                        line-height: 16px;
                        margin-left: 50px;

                        span {
                            color: red;
                        }
                    }

                    .btn_red {
                        width: 100px;
                        height: 36px;
                        background: #F74236;
                        border-radius: 20px;
                        border: 2px solid #D7D7D7;
                        font-size: 13px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-left: 55px;
                        color: black;
                        cursor: pointer;
                    }

                    .btn_green {
                        width: 100px;
                        height: 36px;
                        background: #ffffff;
                        border-radius: 20px;
                        border: 2px solid #D7D7D7;
                        font-size: 13px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: black;
                        margin-left: 16px;
                        cursor: pointer;
                    }
                }
            }

            .right_swiper {
                width: 160px;
                height: 436px;
                margin-left: 25px;

                .swiper_top {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 160px;
                    height: 28px;
                    background: #D7D7D7;
                    border-radius: 6px;
                    margin-bottom: 8px;
                    cursor: pointer;

                    img {
                        width: 12px;
                        height: 12px;
                    }
                }

                .swiper_bottom {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 160px;
                    height: 28px;
                    background: #D7D7D7;
                    border-radius: 6px;
                    margin-top: 8px;
                    cursor: pointer;

                    img {
                        width: 12px;
                        height: 12px;
                        cursor: pointer;
                    }
                }

                .swiper_list {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
            }
        }

        .option_img {
            width: 300px;
            height: 400px;
        }
    }
}

.index_div {
    .el-input input::-webkit-input-placeholder {
        font-size: 11px;
        color: #aaaaaa;
    }

    .el-input input::-moz-input-placeholder {
        font-size: 11px;
        color: #aaaaaa;
    }

    .el-input input::-ms-input-placeholder {
        font-size: 11px;
        color: #aaaaaa;
    }
}

.index_div .el-input__inner {
    border: none;
    list-style: none;
    background-color: #ffffff;
}

.index_lunbo_title .el-input__inner {
    width: 200px;
    height: 40px;
    border-radius: 25px;
    background-color: #ffffff;
    font-size: 13px;
    color: #FCFCFC;
}

.el-select-dropdown__item {
    // width: 240px;
    height: 40px;
    border-bottom: 2px solid #ffffff;

    span {
        width: 100%;
        display: block;
        text-align: center;
    }
}

.el-select-dropdown__item:last-child {
    // width: 240px;
    height: 40px;
    border: none;
}

.el-select-dropdown__item.selected {
    color: red;

    span {
        width: 100%;
        display: block;
        text-align: center;
    }
}

.el-select__caret {
    color: #FFFFFF !important;
}

.el-input__suffix {
    right: 12px;
}

.el-input__inner {
    padding-left: 25px !important;
}

.swiper-container {
    position: relative;
    width: 100%;
    height: 365px;
    overflow: hidden;
}

.swiper-wrapper {
    position: absolute;
    width: 100%;
    top: -120px;
    // height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.swiper-slide {
    width: 154px;
    height: 102px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    margin: 9px 0;
    border-radius: 24px;
    border: 2px solid #D7D7D7;
    transition: all 1s ease;

    img {
        transition: all 1s ease;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        cursor: pointer;
    }
}

.swiper-wrapper .swiper-slide:nth-child(3) {
    transition: all 1s ease;
    width: 160px;
    height: 108px;

    img {
        transition: all 1s ease;
        width: 100%;
        height: 100%;
        border-radius: 24px;
    }
}

// 修改标签大小
.g-image-op-content {
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    font-size: 10px;
}
</style>
